<template>
  <view class="page flex-col">
    <view class="group_1 flex-col">保修内容</view>
    <view class="group_2 flex-col">
      <view class="list_1 flex-col">
        <view class="form-col">
          <view class="form-label"> 故障日期<text class="red">*</text> </view>
          <view class="form-value">
            <picker
              mode="date"
              :value="formData.breakdown_date"
              @change="bindDateChange"
            >
              <view class="uni-input" v-if="formData.breakdown_date"
                >{{ formData.breakdown_date
                }}<image class="icon" src="./img/link.png"
              /></view>
              <view class="uni-input-pl" v-else
                >请选择
                <image class="icon" src="./img/link.png" />
              </view>
            </picker>
          </view>
        </view>
        <view class="form-column">
          <view class="form-content">
            <view class="form-label"> 故障描述<text class="red">*</text> </view>
            <view class="form-value"> </view>
          </view>
          <textarea
            class="textarea"
            maxlength="500"
            v-model="formData.description"
            placeholder="请输入描述内容"
          ></textarea>
        </view>
      </view>
      <view class="box_4 flex-col">
        <span class="text_12">图片/视频</span>
        <view class="image-box">
          <view class="img-list">
            <image
              class="image_2"
              v-for="(item, index) in imgList"
              :src="item.url"
              :key="index"
            />
          </view>

          <image
            class="image_2"
            @click="handleFile"
            referrerpolicy="no-referrer"
            src="./img/add.png"
          />
        </view>
      </view>
    </view>
    <view class="group_3 flex-col">
      <view class="text-wrapper_5 flex-col" @click="handleSubmit">
        <span class="text_13">提交</span>
      </view>
    </view>
  </view>
</template>
<script>
import { baseUrl } from "@/config/index.js";
export default {
  data() {
    return {
      formData: {
        breakdown_date: "",
        description: "",
      },
      order_equipment_id: "",
      imgList: [],
    };
  },
  onLoad(option) {
    this.order_equipment_id = option.order_equipment_id;
  },
  methods: {
    async handleSubmit() {
      if (this.formData.breakdown_date == "") {
        uni.showToast({
          title: "请选择故障日期",
          icon: "none",
        });
        return;
      }
      const resRepair = await this.API.RepairCreate({
        breakdown_date: this.formData.breakdown_date,
        description: this.formData.description,
        enabled: true,
        repair_status_id: 0,
        repair_category_id: 0,
        order_equipment_id: String(this.order_equipment_id),
      });
      if (resRepair?.repair_id) {
        const repair_id = resRepair.repair_id; //第一步完成
        this.imgList?.forEach(async (item) => {
          await this.API.RepairFilerCreate({
            repair_id,
            ...item,
          }); //第三步完成
        });
        uni.showToast({
          title: "提交成功",
          icon: "none",
        });
        this.formData = {
          breakdown_date: "",
          description: "",
        };
        this.imgList = [];
      } else {
        uni.showToast({
          title: "提交失败",
          icon: "none",
        });
      }
    },
    bindDateChange(e) {
      this.formData.breakdown_date = e.detail.value;
      console.log(e, this.formData.breakdown_date);
    },
    handleFile() {
      uni.chooseImage({
        success: (chooseImageRes) => {
          const tempFilePaths = chooseImageRes.tempFilePaths;
          uni.uploadFile({
            url: `${baseUrl}/api/File/Upload`,
            filePath: tempFilePaths[0],
            name: "file",
            header: {
              Authorization: `Bearer ${uni.getStorageSync("token")}`,
            },
            success: (uploadFileRes) => {
              let datas = JSON.parse(uploadFileRes.data);
              this.imgList.push(datas.data);
            },
          });
        },
      });
    },
  },
};
</script>
<style scoped lang="less">
.page {
  background-color: rgba(247, 247, 247, 1);
  position: relative;
  width: 750rpx;
  height: 100%;
  overflow: hidden;
  .group_1 {
    width: 750rpx;
    padding: 32rpx 32rpx 24rpx 32rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 28rpx;
    color: #999999;
    line-height: 48rpx;
    text-align: left;
    font-style: normal;
  }
  .group_2 {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 12px;
    width: 702rpx;
    align-self: center;
    margin-top: -2rpx;
    padding: 0 32rpx 0 32rpx;
    .list_1 {
      .form-col {
        width: 638rpx;
        height: 128rpx;
        background: #ffffff;
        box-shadow: inset 0rpx -1rpx 0rpx 0rpx #e6ebf1;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .form-value {
        display: flex;
        align-items: center;
        .uni-input {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 32rpx;
          color: #262626;
          line-height: 52rpx;
          text-align: center;
          font-style: normal;
        }
        .uni-input-pl {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 32rpx;
          color: #cccccc;
          line-height: 52rpx;
          text-align: center;
          font-style: normal;
        }
        .icon {
          width: 12rpx;
          height: 20rpx;
          margin-left: 8rpx;
        }
      }
      .form-label {
        display: flex;
        align-items: center;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 32rpx;
        color: #000000;
        line-height: 52rpx;
        text-align: left;
        font-style: normal;
        .red {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #e32323;
          line-height: 48rpx;
          text-align: right;
          font-style: normal;
        }
      }
      .form-column {
        .form-content {
          width: 638rpx;
          height: 114rpx;
          background: #ffffff;
          box-shadow: inset 0rpx -1rpx 0rpx 0rpx #e6ebf1;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
        .textarea {
          width: 638rpx;
          height: 280rpx;
          background: #f8f9fb;
          border-radius: 16rpx;
          padding: 28rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #262626;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
        }
      }
    }
    .box_3 {
      background-color: rgba(255, 255, 255, 1);
      padding-top: 38rpx;
      .text-wrapper_3 {
        width: 638rpx;
        .text_9 {
          overflow-wrap: break-word;
          color: rgba(0, 0, 0, 1);
          font-size: 32rpx;
          font-weight: normal;
          text-align: left;
          white-space: nowrap;
          line-height: 52rpx;
        }
        .text_10 {
          overflow-wrap: break-word;
          color: rgba(140, 140, 140, 1);
          font-size: 28rpx;
          font-weight: normal;
          text-align: left;
          white-space: nowrap;
          line-height: 40rpx;
          margin-top: 12rpx;
        }
      }
      .text-wrapper_4 {
        background-color: rgba(248, 249, 251, 1);
        border-radius: 8px;
        margin-top: 24rpx;
        padding: 28rpx 414rpx 212rpx 28rpx;
        .text_11 {
          overflow-wrap: break-word;
          color: rgba(204, 204, 204, 1);
          font-size: 28rpx;
          font-weight: normal;
          text-align: left;
          white-space: nowrap;
          line-height: 40rpx;
        }
      }
    }
    .box_4 {
      background-color: rgba(255, 255, 255, 1);
      padding: 38rpx 494rpx 40rpx 0;
      .text_12 {
        overflow-wrap: break-word;
        color: rgba(0, 0, 0, 1);
        font-size: 32rpx;
        font-weight: normal;
        text-align: left;
        white-space: nowrap;
        line-height: 52rpx;
      }
      .image-box {
        display: flex;
        .image-list {
          display: flex;
        }
      }
      .image_2 {
        width: 132rpx;
        height: 132rpx;
        margin: 24rpx 12rpx 0 0;
      }
    }
  }
  .group_3 {
    background-color: rgba(255, 255, 255, 1);
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20rpx 46rpx 18rpx 68rpx;
    .text-wrapper_5 {
      background-color: rgba(39, 118, 255, 1);
      border-radius: 6px;
      padding: 24rpx 284rpx 20rpx 284rpx;
      .text_13 {
        overflow-wrap: break-word;
        color: rgba(255, 255, 255, 1);
        font-size: 34rpx;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        text-align: right;
        white-space: nowrap;
        line-height: 48rpx;
      }
    }
  }
}
</style>
